<!DOCTYPE html>
<html lang="en">

<head>
  <title>Каталог сайта города Седона</title>
  <link rel="icon" href="favicon.ico">
  <link rel="icon" type="image/png" href="images/favicon.png">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/styles.css">
</head>

<body>
  <div class="container">
    <header class="page-header">
      <nav class="navigation">
        <a class="navigation-logo" href="index.html">
          <img class="navigation-logo" src="images/logotip.svg" width="139" height="70" alt="Логотип Седоны.">
        </a>
        <ul class=" navigation-list">
          <li class="navigation-item">
            <a class="navigation-link" href="index.html">Главная</a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link" href="about.html">О Седоне</a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link navigation-link-current" href="catalog.html">Гостиницы</a>
          </li>
        </ul>
        <ul class="navigation-list navigation-user">
          <li class="navigation-item">
            <a class="navigation-link navigation-link-icon navigation-link-search" href="#">
              <span class="visually-hidden">
                Поиск.
              </span>
            </a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link navigation-link-icon navigation-link-favorite" href="#">
              <span class="visually-hidden">Избранное.</span>
              <span class="like">12</span>
            </a>
          </li>
          <li class="navigation-item">
            <a class="navigation-link navigation-link-want-here" href="#">
              <span class="button want-here">
                Хочу сюда!
              </span>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="main-inner">
      <section class="catalog-products">
        <h1 class="inner-header-title">Гостиницы Седоны</h1>
        <ul class="breadcrumbs">
          <li class="breadcrumbs-item">
            <a class="breadcrumbs-link" href="index.html">
              <svg class="breadcrumbs-icon" aria-hidden="true" focusable="false" width="13" height="13"
                viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="m.162 6.15 6-5.5 6 5.5v6.2h-12v-6.2Zm1 .4v4.8h10v-4.8l-5-4.5-5 4.5Zm4 3.8h-1v-3.5h4v3.5h-1v-2.5h-2v2.5Z"
                  fill="#" />
              </svg>
              <span class="visually-hidden">Главная.</span>
            </a>
          </li>
          <li class="breadcrumbs-item">
            <a class="breadcrumbs-link breadcrumbs-link-icon" href="#">Гостиницы</a>
          </li>
        </ul>
        <h2 class="visually-hidden">Сортировка.</h2>
        <form class="catalog-filter" action="https://echo.htmlacademy.ru" method="get">
          <div class="filter-group-list">
            <fieldset class="catalog-filter-group">
              <legend class="catalog-filter-title">Инфраструктура:</legend>
              <ul class="catalog-filter-list">
                <li class="catalog-filter-item">
                  <label class="control control-infrastructure">
                    <input class="visually-hidden control-input" type="checkbox" name="swimming-pool" checked>
                    <span class="caption-mark"></span>
                    <span class="caption-type">Бассейн</span>
                  </label>
                </li>
                <li class="catalog-filter-item">
                  <label class="control control-infrastructure">
                    <input class="visually-hidden control-input" type="checkbox" name="parking" checked>
                    <span class="caption-mark"></span>
                    <span class="caption-type">Парковка</span>
                  </label>
                </li>
                <li class="catalog-filter-item">
                  <label class="control control-infrastructure">
                    <input class="visually-hidden control-input" type="checkbox" name="Wi-Fi">
                    <span class="caption-mark"></span>
                    <span class="caption-type">Wi-Fi</span>
                  </label>
                </li>
              </ul>
            </fieldset>
            <fieldset class="catalog-filter-type">
              <legend class="catalog-filter-title">Тип Жилья:</legend>
              <ul class="catalog-filter-view">
                <li class="catalog-filter-item">
                  <label class="control">
                    <input class="visually-hidden control-input housing-input" type="radio" name="housing"
                      value="hotels" checked>
                    <span class="caption-mark area"></span>
                    <span class="caption-type">Гостиница</span>
                  </label>
                </li>
                <li class="catalog-filter-item">
                  <label class="control">
                    <input class="visually-hidden control-input housing-input" type="radio" name="housing"
                      value="motel">
                    <span class="caption-mark area"></span>
                    <span class="caption-type">Мотель</span>
                  </label>
                </li>
                <li class="catalog-filter-item">
                  <label class="control">
                    <input class="visually-hidden control-input housing-input" type="radio" name="housing"
                      value="apartments">
                    <span class="caption-mark area"></span>
                    <span class="caption-type">Апартаменты</span>
                  </label>
                </li>
              </ul>
            </fieldset>
          </div>
          <div class="wrapper">
            <fieldset class="catalog-filter-price">
              <legend class="catalog-filter-title">Стоимость, ₽:</legend>
              <div class="range">
                <div class="range-wrapper">
                  <label class="form-label">
                    <input class="range-input input-min" type="number" min="0" value="0" name="min-price">
                    <span class="visually-hidden">Минимальная цена.</span>
                  </label>
                  <label class="form-label">
                    <input class="range-input input-max" type="number" min="9000" value="9000" name="max-price">
                    <span class="visually-hidden">Максимальная цена.</span>
                  </label>
                </div>
                <div class="range-scale">
                  <div class="range-bar">
                    <button class="range-toggle toggle-min" type="button">
                      <span class="visually-hidden">Изменить минимальную цену.</span>
                    </button>
                    <button class="range-toggle toggle-max" type="button">
                      <span class="visually-hidden">Изменить максимальную цену.</span>
                    </button>
                  </div>
                </div>
              </div>
            </fieldset>
            <div class="button-filter">
              <button class="button-social button-submit" type="submit">Применить</button>
              <button class="button-reset" type="reset">Сбросить</button>
            </div>
          </div>
        </form>
      </section>
      <section class="catalog">
        <div class="sorting-container">
          <h2 class="inner-header-catalog">Найдено гостиниц: 38</h2>
          <select class="select-control" aria-label="Сортировка">
            <option value="select-control-popular">Сначала дешевые</option>
            <option value="select-control-cheap">Сначала популярные</option>
            <option value="select-control-expensive">Сначала дорогие</option>
          </select>
          <ol class="breadcrumb-view">
            <li class="breadcrumb-switcer">
              <a class="card-grid-toggle card-grid-toggle-current toggle-cards" href="#">
                <span class="visually-hidden">Показать таблицу.</span>
              </a>
              <a class="card-grid-toggle toggle-list" href="#">
                <span class="visually-hidden">Показать слайд-шоу.</span>
              </a>
              <a class="card-grid-toggle toggle-alone" href="#">
                <span class="visually-hidden">Показать список.</span>
              </a>
            </li>
          </ol>
        </div>
        <ul class="hotel">
          <li class="product-card">
            <a class="product-card-link" href="#">
              <img class="product-card-image" src="images/amararesort.jpg" width="300" height="211"
                alt="Amara Resort & Spa.">
              <h3 class="product-card-title">Amara Resort & Spa</h3>
            </a>
            <div class="hotel-info">
              <p class="product-card-hotel">Гостиница</p>
              <p class="product-card-price"> От 4000 ₽</p>
              <a class="button navigation-link-more" href="#">Подробнее</a>
              <button class="button-favorites" type="submit">В Избранное</button>
              <div class="stars stars-amara">
                <span class="visually-hidden">4 звезды.</span>
              </div>
              <div class="rating">Рейтинг: 8,5</div>
            </div>
          </li>
          <li class="product-card">
            <a class="product-card-link" href="#">
              <img class="product-card-image" src="images/villasatpoco.jpg" width="300" height="211"
                alt="Villas at Poco Diablo.">
              <h3 class="product-card-title">Villas at Poco Diablo</h3>
            </a>
            <div class="hotel-info">
              <p class="product-card-hotel">Гостиница</p>
              <p class="product-card-price">От 5000 ₽</p>
              <a class="button navigation-link-more" href="#">Подробнее</a>
              <button class="button-favorites-like" type="submit">В Избранном</button>
              <div class="stars stars-villas">
                <span class="visually-hidden">4 звезды.</span>
              </div>
              <div class="rating">Рейтинг: 9,2</div>
            </div>
          </li>
          <li class="product-card">
            <a class="product-card-link" href="#">
              <img class="product-card-image" src="images/desertquail.jpg" width="300" height="211"
                alt="Desert Quail Inn.">
              <h3 class="product-card-title">Desert Quail Inn</h3>
            </a>
            <div class="hotel-info">
              <p class="product-card-hotel">Гостиница</p>
              <p class="product-card-price">От 2500 ₽</p>
              <a class="button navigation-link-more" href="#">Подробнее</a>
              <button class="button-favorites" type="submit">В Избранное</button>
              <div class="stars stars-three">
                <span class="visually-hidden">3 звезды.</span>
              </div>
              <div class="rating">Рейтинг: 6,9</div>
            </div>
          </li>
          <li class="product-card">
            <a class="product-card-link" href="#">
              <img class="product-card-image" src="images/greentree.jpg" width="300" height="211" alt="GreenTree Inn.">
              <h3 class="product-card-title">GreenTree Inn</h3>
            </a>
            <div class="hotel-info">
              <p class="product-card-hotel">Гостиница</p>
              <p class="product-card-price">От 1500 ₽</p>
              <a class="button navigation-link-more" href="#">Подробнее</a>
              <button class="button-favorites" type="submit">В Избранное</button>
              <div class="stars stars-two">
                <span class="visually-hidden">2 звезды.</span>
              </div>
              <div class="rating">Рейтинг: 5,0</div>
            </div>
          </li>
        </ul>
        <div class="pagination-container">
          <ul class="pagination">
            <li class="pagination-item">
              <a class="pagination-active">1</a>
            </li>
            <li class="pagination-item">
              <a class="pagination-link" href="#">2</a>
            </li>
            <li class="pagination-item">
              <a class="pagination-link" href="#">3</a>
            </li>
            <li class="pagination-item">
              <a class="pagination-link" href="#">4</a>
            </li>
            <li class="pagination-item">
              <a class="pagination-link" href="#">...</a>
            </li>
            <li class="pagination-item">
              <a class="pagination-link" href="#">10</a>
            </li>
          </ul>
          <label class="sorting-quantity" for="sorting-quantity">Гостиниц на странице:</label>
          <select class="sorting-select" name="sorting-quantity" id="sorting-quantity">
            <option value="">4</option>
            <option value="">8</option>
            <option value="">12</option>
          </select>
        </div>
      </section>
      <section class="newsletter newsletter-light">
        <h2 class="newsletter-title newsletter-title-dark">Подпишитесь на рассылку</h2>
        <form class="newsletter-form" action="https://echo.htmlacademy.ru/" method="post">
          <p class="newsletter-catalog-subtitle newsletter-catalog-dark">Только полезная информация и никакого спама,
            <br>честное
            бойскаутское!
          </p>
          <div class="newsletter-field">
            <input class="email email-catalog" placeholder="Ваш e-mail" type="email" name="newsletter-email" id="newsletter-email"
              required>
            <span class="visually-hidden">Ваш e-mail.</span>
            <button class="newsletter-button">Подписаться</button>
          </div>
        </form>
      </section>
    </main>
    <footer class="footer-social">
      <ul class="footer-social-list">
        <li class="footer-social-vkontakte">
          <a class="button-social button-social-vkontakte" href="https://vk.com/htmlacademy">
            <svg class="footer-icon" aria-hidden="true" focusable="false" width="24" height="15" viewBox="0 0 24 15"
              fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd"
                d="M23.45 1.448c.166-.546 0-.948-.795-.948H20.03c-.668 0-.976.347-1.143.73 0 0-1.335 3.196-3.226 5.272-.612.602-.89.793-1.224.793-.167 0-.418-.191-.418-.738V1.448c0-.656-.184-.948-.74-.948H9.151c-.417 0-.668.304-.668.593 0 .621.946.765 1.043 2.513v3.798c0 .833-.153.984-.487.984-.89 0-3.055-3.211-4.34-6.885C4.45.788 4.198.5 3.527.5H.9c-.75 0-.9.347-.9.73 0 .682.89 4.07 4.145 8.551 2.17 3.06 5.225 4.719 8.008 4.719 1.669 0 1.875-.368 1.875-1.003v-2.313c0-.737.158-.884.687-.884.39 0 1.057.192 2.615 1.667 1.78 1.749 2.073 2.533 3.075 2.533h2.625c.75 0 1.126-.368.91-1.096-.238-.724-1.088-1.775-2.215-3.022-.612-.71-1.53-1.475-1.809-1.858-.389-.491-.278-.71 0-1.147 0 0 3.2-4.426 3.533-5.929h.001Z"
                fill="" />
            </svg>
            <span class="visually-hidden">В Контакте.</span>
          </a>
        </li>
        <li class="footer-social-telegramm">
          <a class="button-social button-social-telegramm" href="https://t.me/htmlacademy">
            <svg class="footer-icon" aria-hidden="true" focusable="false" width="18" height="16" viewBox="0 0 18 16"
              fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M16.785.6.841 6.747c-1.088.437-1.082 1.044-.2 1.315L4.735 9.34l9.471-5.976c.448-.273.857-.126.521.172l-7.674 6.926h-.001.001l-.282 4.22c.414 0 .596-.19.828-.413l1.989-1.934 4.135 3.055c.763.42 1.31.204 1.5-.706L17.938 1.89C18.216.775 17.513.27 16.786.599Z"
                fill="" />
            </svg>
            <span class="visually-hidden">Телеграмм.</span>
          </a>
        </li>
        <li class="footer-social-youtube">
          <a class="button-social button-social-youtube" href="https://www.youtube.com/user/htmlacademyru">
            <svg class="footer-icon" aria-hidden="true" focusable="false" width="22" height="17" viewBox="0 0 22 17"
              fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M18.607 0H3.174C1.314 0 0 1.594 0 3.4v10.094C0 15.406 1.313 17 3.174 17h15.652C20.468 17 22 15.406 22 13.6V3.4C21.781 1.594 20.468 0 18.607 0ZM7.662 12.537V4.463L14.995 8.5l-7.333 4.037Z"
                fill="" />
            </svg>
            <span class="visually-hidden">Ютуб.</span>
          </a>
        </li>
      </ul>
      <address class="footer-phone">
        <a class="phone" href="tel:+7(812)812-12-12">+7 (812) 812-12-12</a>
      </address>
      <address class="footer-item">
        <a class="footer-logo" href=" https://htmlacademy.ru/">
          <svg class="logo-html" aria-hidden="true" focusable="false" width="115" height="34" viewBox="0 0 115 34"
            fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M0 13.9v2.6h2.5v-2.6H0ZM11.6 5.5c-1.6 0-2.8.7-3.6 1.7h-.1V1h-2v15.5h2v-5.3c0-2.1 1.3-3.6 3.3-3.6 1.8 0 2.9 1.4 2.9 3.2v5.7h2v-6.1c.1-3-1.8-4.9-4.5-4.9ZM26.6 5.8h-4.8V2.1h-2v3.8h-1.9v2h1.9v6c0 1.7 1 2.7 2.7 2.7h4.1v-2h-3.7c-.7 0-1.1-.4-1.1-1.1V7.8h4.8v-2ZM41.1 5.6c-1.6 0-2.9.8-3.5 2.1h-.1c-.6-1.2-1.8-2.1-3.4-2.1-1.4 0-2.5.8-3.1 1.8h-.1V5.8H29v10.6h2V11c0-2 1-3.5 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2V9.9c.1-2.5-1.4-4.3-3.9-4.3ZM47.8 13.7c0 1.7 1 2.7 2.8 2.7h2v-2h-1.7c-.7 0-1.1-.4-1.1-1.1V1h-2v12.7ZM28.9 20.7c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2V19.2h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.4 3.6-3.6 3.6ZM44.2 23c-.5-2.4-2.6-4.1-5.4-4.1a5.4 5.4 0 0 0-5.6 5.6c0 3.1 2.2 5.6 5.6 5.6 2.8 0 4.9-1.8 5.4-4.2h-2.1a3.4 3.4 0 0 1-3.3 2.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6c1.6 0 2.8 1 3.3 2.2h2.1V23ZM55.1 20.7c-.9-1.1-2.2-1.8-3.9-1.8-3.1 0-5.4 2.3-5.4 5.6s2.3 5.6 5.4 5.6c1.8 0 3-.8 3.8-1.9h.1v1.6h2V19.2h-2v1.5Zm-3.6 7.4c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c0 1.9-1.5 3.6-3.6 3.6ZM68.7 20.8c-.9-1.1-2.2-1.9-3.9-1.9-3.1 0-5.4 2.3-5.4 5.6s2.2 5.6 5.4 5.6c1.7 0 3-.8 3.8-1.8h.1v1.5h2V14.4h-2v6.4Zm-3.6 7.3c-2.2 0-3.6-1.6-3.6-3.6s1.4-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.5 3.6-3.6 3.6ZM78.3 18.9c-3.3 0-5.5 2.5-5.5 5.6 0 3 2.1 5.6 5.5 5.6 2.5 0 4.5-1.3 5.2-3.6h-2.1c-.5 1-1.6 1.6-3 1.6-1.9 0-3.3-1.3-3.4-2.9h8.8c.2-3.6-2-6.3-5.5-6.3Zm0 1.9c1.7 0 3 1 3.3 2.6h-6.5c.3-1.5 1.5-2.6 3.2-2.6ZM98.2 18.9c-1.6 0-2.9.8-3.6 2h-.1c-.6-1.2-1.8-2-3.4-2-1.4 0-2.5.7-3.1 1.8v-1.5h-1.9v10.6h2v-5.4c0-2 1-3.4 2.6-3.5 1.5 0 2.4 1 2.4 2.6v6.3h2v-5.6c0-2.4 1.4-3.3 2.6-3.3 1.5 0 2.4 1 2.4 2.6v6.3h2v-6.5c.1-2.6-1.4-4.4-3.9-4.4ZM109.4 28l-3.6-8.9h-2.2l4.8 11.6c-.3.9-.7 1.2-1.7 1.2h-2.5v2h2.5c1.8 0 2.8-.8 3.5-2.6l4.7-12.2h-2.1l-3.4 8.9Z"
              fill="" />
          </svg>
          <span class="visually-hidden">Аккадемия.</span>
        </a>
      </address>
    </footer>
  </div>
</body>

</html>
